<template>
  <div class="code">
    <div class="code_box">
      <p class="tishi">联系我们</p>
      <div
        class="qrcode"
        ref="qrCodeUrl"
      ></div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  name: "qrcode",
  methods: {
    creatQrCode() {
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容
        width: 70,
        height: 70,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
  mounted() {
    this.creatQrCode();
  },
};
</script>

<style scoped>
.code {
  position: fixed;
  right: 5.5rem;
  bottom: 2.1875rem;
  background-color: #eeeeee;
}
.code_box {
  width: 5.5rem;
}
.tishi {
  text-align: center;
  padding-bottom: 0.3125rem;
}
.qrcode {
  width: 77%;
  margin: 0 auto;
}
.code:hover {
  animation: code 1s;
}
/* 动画 */
@keyframes code {
  from {
    width: 6.5rem;
    height: 6.5625rem;
    text-align: center;
    background-color: #eeeeee;
  }
  to {
    width: 7.5rem;
    height: 7rem;
    background-color: #eeeeee;
  }
}
</style>